<!--  -->
<template>
  <v-container class="pt-0">
    <section>
      <v-container  class="pa-0">
      <v-layout row>
        <v-flex xs2 fill-height color="primary">
          <v-menu class="primary" offset-x open-on-hover v-for="ca in category" :key="ca.cid">
            <!-- <v-btn slot="activator" dark text class="my-0 subheading" block :to="{ name: 'ShopList', query: { cid: ca.cid} }">
              {{ca.cname}}
              <v-icon right>keyboard_arrow_right</v-icon>
            </v-btn> -->
            <template v-slot:activator="{ on }">
              <v-btn v-on="on" tile class="primary subheading" block :to="{ name: 'ShopList', query: { cid: ca.cid} }">{{ca.cname}}<v-icon right>keyboard_arrow_right</v-icon></v-btn>
            </template>
            <v-list v-if="ca.children">
              <v-list-item v-for="child in ca.children" :key="child.cid" :to="{ name: 'ShopList', query: { cid: child.cid} }">
                <v-list-item-title>{{child.cname}}</v-list-item-title>
              </v-list-item>
            </v-list>
            <v-list v-else>
              <v-list-item>
                <v-list-item-title>无</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-flex>
        <v-flex xs10 >
          <v-carousel class="elevation-0" height="540">
            <v-carousel-item
              v-for="(item,i) in carouselItems"
              :key="i"
              :src="item.image[0].url"
            ></v-carousel-item>
          </v-carousel>
        </v-flex>
      </v-layout>
      </v-container>
    </section>
    <section>
      <v-container grid-list-xl fluid class="px-0">
        <v-layout class="pt-3">
          <v-flex xs4>
            <v-card color="yellow lighten-3" hover height="200">
              <v-card-title>推荐位1</v-card-title>
              <v-card-text></v-card-text>
              <v-card-actions></v-card-actions>
            </v-card>
          </v-flex>
          <v-flex xs4>
            <v-card color="red lighten-3"  hover height="200">
              <v-card-title>推荐位2</v-card-title>
              <v-card-text></v-card-text>
              <v-card-actions></v-card-actions></v-card>
          </v-flex>
          <v-flex xs4>
            <v-card color="blue lighten-3" hover height="200">
              <v-card-title>推荐位3</v-card-title>
              <v-card-text></v-card-text>
              <v-card-actions></v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </section>
    <section>
      <v-container grid-list-xl fluid  class="px-0">
        <v-layout class="pt-3" wrap>
          <v-flex xs12><router-link :to="{ name: 'ShopList' }"><span class="headline">文化产品</span></router-link></v-flex>
          <v-flex xs6 sm4 md3 v-for="n in 4" :key="n">
            <v-card :to="{ name: 'ShopDetail', params: { id: 1 } }" height="300" hover>
              <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75" height="180"></v-img>
              <v-card-title class="pb-0">
                <span color="">{{n}}号产品</span>
                <span class="red--text">￥ {{n}}2.00</span>
                <span><v-btn icon small><v-icon>shopping_cart</v-icon></v-btn></span>
              </v-card-title>
              <v-card-text>产品介绍</v-card-text>
              <v-card-actions></v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </section>

    <section>
      <v-container grid-list-xl fluid  class="px-0">
        <v-layout class="pt-3" wrap>
          <v-flex xs12><router-link :to="{ name: 'ShopList' }"><span class="headline">演出门票</span></router-link></v-flex>
          <v-flex xs6 sm4 md3 v-for="n in 4" :key="n">
            <v-card color="" height="300" hover :to="{ name: 'ShopDetail', params: { id: 1 } }">
              <v-img src="https://cdn.vuetifyjs.com/images/cards/kitchen.png" aspect-ratio="2.75" height="180"></v-img>
              <v-card-title class="pb-0">
                <span color="">{{n}}号产品</span>
                <span class="red--text">￥ {{n}}2.00</span>
                <span><v-btn icon small><v-icon>shopping_cart</v-icon></v-btn></span>
              </v-card-title>
              <v-card-text>产品介绍</v-card-text>
              <v-card-actions></v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </section>
    <section>
      <v-container fluid class="pa-0">
        <v-layout>
          <v-img src="https://i1.mifile.cn/a4/xmad_15399539193035_YORhp.jpg"></v-img>
        </v-layout>
      </v-container>
    </section>
    <section>
      <v-container grid-list-xl fluid  class="px-0">
        <v-layout class="pt-3" wrap>
          <v-flex xs12><router-link :to="{ name: 'ShopList' }"><span class="headline">动漫/网游</span></router-link></v-flex>
          <v-flex xs6 md4 v-for="n in 6" :key="n">
            <v-card color="" height="300" hover :to="{ name: 'ShopDetail', params: { id: 1 } }">
              <v-img src="https://cdn.vuetifyjs.com/images/cards/cooking.png" aspect-ratio="2.75" height="180"></v-img>
              <v-card-title class="pb-0">
                <span color="">{{n}}号产品</span>
                <span class="red--text">￥ {{n}}2.00</span>
                <span><v-btn icon small><v-icon>shopping_cart</v-icon></v-btn></span>
              </v-card-title>
              <v-card-text>产品介绍</v-card-text>
              <v-card-actions></v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </section>
    <section>
      <v-container grid-list-xl fluid  class="px-0">
        <v-layout class="pt-3" wrap>
          <v-flex xs12><router-link :to="{ name: 'ShopList' }"><span class="headline">休闲/康养</span></router-link></v-flex>
          <v-flex xs6 sm4 md3 v-for="n in 8" :key="n">
            <v-card color="" height="300" hover :to="{ name: 'ShopDetail', params: { id: 1 } }">
              <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75" height="180"></v-img>
              <v-card-title class="pb-0">
                <span color="">{{n}}号产品</span>
                <span class="red--text">￥ {{n}}2.00</span>
                <span><v-btn icon small><v-icon>shopping_cart</v-icon></v-btn></span>
              </v-card-title>
              <v-card-text>产品介绍</v-card-text>
              <v-card-actions></v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </section>
  </v-container>
</template>

<script>
import { homepage as HomepageAPI } from '@/api/shop/home.js'
export default {
  name: 'ShopHome',
  data: function () {
    return {
      carouselItems: [
        {
          image: [{
            url: '/static/img/demo/carousel_1.jpg'
          }]
        },
        {
          image: [{
            url: '/static/img/demo/carousel_2.jpg'
          }]
        },
        {
          image: [{
            url: '/static/img/demo/carousel_3.jpg'
          }]
        }
      ]
    }
  },
  created: function () {
    this.fetchData()
    if (!this.$store.getters.hasMenuData) {
      this.$store.dispatch('getMenuData')
    }
  },
  computed: {
    category: function () {
      return this.$store.state.menu.menuData
    }
  },
  methods: {
    fetchData: function () {
      HomepageAPI().then(res => {
        if (res.data.carousels.length > 0) {
          this.carouselItems = res.data.carousels
        }
      })
    }
  }
}
</script>
<style>
a{
text-decoration:none;
}
</style>
